<template>
	<view class="content">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" circular="true" :interval="3000"
			:duration="1000">
			<swiper-item v-for="(item,index) in picList" :key="index">
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		<!-- //审批 -->
		<view class="approve">
			<view class="approve_item" v-for="(item,index) in approveList" :key="item.id">
				<image :src="item.icon" mode="widthFix"></image>
				<view class="right">
					<view class="title">
						{{item.title}}
					</view>
					<view class="subTitle">
						{{item.subTitle}}
					</view>
				</view>
			</view>
		</view>
		<!-- //主体部分 -->
		<view class="ul common">
			<view class="title">
				<view class="circle">

				</view>
				<text>常用服务</text>
			</view>
			<view class="li" v-for="(item,index) in commonList" :key="item.id" @click="toPath(item.routeIndex)">
				<image :src="item.icon" mode="widthFix"></image>
				<view>{{item.title}}</view>
			</view>
			<view class="li">
				<image src="../../static/tab_icons/cate-active.png" mode="widthFix"></image>
				<view>更多</view>
			</view>
		</view>
		<view class="ul other">
			<view class="title">
				<view class="circle">
				</view>
				<text>其他服务</text>
			</view>
			<view class="li" v-for="(item,index) in otherList" :key="item.id">
				<image :src="item.icon" mode="widthFix"></image>
				<view>{{item.title}}</view>
			</view>
			<view class="li">
				<image src="../../static/tab_icons/cate-active.png" mode="widthFix"></image>
				<view>更多</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getList} from '../../api/api.js'
	export default {
		data() {
			return {
				picList: [],
				approveList: [],
				commonList: [],
				otherList: []
			}
		},
		onLoad() {
			getList().then(res => {
				this.picList = res.result.config[0].carouselImgJson.split(",")
				this.approveList = res.result.route.filter(item => item.type == 'approve')
				this.commonList = res.result.route.filter(item => item.type == 'common')
				this.otherList = res.result.route.filter(item => item.type == 'other')
			})
		},
		methods: {
			//跳转页面
			toPath(val){
				uni.navigateTo({
					url:`/pages/${val}/${val}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.swiper {
			width: 750rpx;
			height: 374rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.approve {
			width: 750rpx;
			display: flex;
			border-bottom: 1px solid #ccc;

			.approve_item {
				width: 50%;
				display: flex;
				align-items: center;
				padding: 20rpx 40rpx;
				box-sizing: border-box;
				border-right: 1px solid #ccc;

				image {
					width: 120rpx;
				}

				.right {
					text-align: center;
					font-size: 28rpx;
					margin-left: 30rpx;

					.subTitle {
						color: #999;
						margin-top: 4rpx;
					}
				}
			}
		}

		.ul {
			width: 750rpx;
			display: flex;
			flex-wrap: wrap;

			.title {
				display: flex;
				align-items: center;
				width: 100%;
				margin-top: 30rpx;

				.circle {
					width: 15rpx;
					height: 15rpx;
					border-radius: 50%;
					margin: 0 20rpx;
				}
			}

			.li {
				width: 25%;
				text-align: center;
				font-size: 24rpx;
				margin: 30rpx 0;

				image {
					width: 30%;
				}
			}
		}

		.common {
			.circle {
				background-color: #0081ff;
			}
		}

		.other {
			.circle {
				background-color: #fbbd08;
			}
		}
	}
</style>
